<template>
  <div class="h-full">
    <div ref="formRef">
      <FormTitle :title="userInfo?.projectName" :user-name="userInfo?.projectManage" :data="data" />
    </div>

    <div :class="complexHeight">
      <HComplexPage
        class="px-4 h-full"
        isUpdate
        detail
        :record="record"
        :preview="false"
        v-model:active="activePage"
        :pageType="pageInfo.pageType"
        :dataSource="pageInfo.modelList"
        :buttons="pageInfo.buttons"
        :parentModel="modalParams.parentModel"
      />
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, onMounted, ref, unref, nextTick } from 'vue';
  // import { PageWrapper } from '/@/components/Page';
  import { Divider, Card, Descriptions, Steps, Tabs } from 'ant-design-vue';
  import FormTitle from './components/IndexFormTitle.vue';
  import {
    getProjectManagementApi,
    getProjectManagementUserApi,
  } from '/@/api/zkrq/projectManagement';
  import { useDrawer } from '/@/components/Drawer';
  // import { StepMenuDrawer } from '/@/components/ModelTable/src/components/customCom/components/Asteps';
  // import StepBar from './components/StepBar.vue';
  // import StepMenuDrawer from './components/StepMenuDrawer.vue';
  import { getDictTypeListApi } from '/@/api/admin/dict';

  import { getCompositeInfoApi } from '/@/api/config-center/model-design';
  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';

  interface Info {
    projectName: string;
    projectManage: string;
  }
  const ZK_PROJECT_TAB = 'zk_project_tab'; //字典

  export default defineComponent({
    components: {
      FormTitle,
      // StepBar,
      // StepMenuDrawer,
      // PageWrapper,
      [Divider.name]: Divider,
      [Card.name]: Card,
      [Descriptions.name]: Descriptions,
      [Descriptions.Item.name]: Descriptions.Item,
      [Steps.name]: Steps,
      [Steps.Step.name]: Steps.Step,
      [Tabs.name]: Tabs,
      [Tabs.TabPane.name]: Tabs.TabPane,
      HComplexPage: createAsyncComponent(() => import('/@/components/HComplexPage/index.vue'), {
        loading: true,
      }),
    },
    props: {
      modelId: {
        type: String,
      },
      moduleId: {
        type: String,
      },
      record: {
        type: Object,
        default: () => ({}),
      },
      modalParams: {
        type: Object,
        default: () => ({}),
      },
    },
    setup(props) {
      const [registerDrawer, { openDrawer }] = useDrawer();
      const type = ref('2');
      // 测试提交
      // console.log('record:', props.record.id);
      console.log('record:', props.record);
      const userData = ref([]);
      const userInfo = ref<Info>();

      const data = ref([]);

      const formRef = ref<any>(null);

      const complexHeight = ref('h-[calc(100%-56px)]');

      onMounted(async () => {
        await init();
      });

      // 动态设置复合模型高度
      function setComplexHeight() {
        const height = formRef.value.offsetHeight;
        complexHeight.value = `h-[calc(100%-${height}px)]`;
      }

      async function init() {
        const ret = await await getProjectManagementApi({
          projectId: Number(props.record.project_id),
        });
        initComplex();
        if (ret && ret.list.length) {
          data.value = ret.list;
          userInfo.value = { projectName: ret.projectName, projectManage: ret.projectManage };
        }
      }
      async function getShowTab() {
        return await getDictTypeListApi({
          type: ZK_PROJECT_TAB,
        });
      }
      async function initUser() {
        const ret = await await getProjectManagementUserApi({ id: 1 });

        userData.value = ret;
      }
      function handleCreate(record: Recordable = {}) {
        initUser();
        openDrawer(true, {
          record,
          isUpdate: false,
        });
      }

      const activePage = ref(0);
      const pageInfo = ref<Indexable>({});
      async function initComplex() {
        if (!props.modelId) return;
        const data = await getCompositeInfoApi({
          moduleId: unref(props.moduleId),
          modelId: unref(props.modelId),
        });

        const statusList = await getShowTab();

        const currentProjectTabs = statusList.find(
          (el) =>
            props.record.project_state &&
            el.label.includes(props.record.project_state?.value || props.record.project_state),
        );

        //  只显示当前项目状态 对应配置的tab
        if (currentProjectTabs) {
          const ret = data.compositeDesignInfo || { modelList: [] };
          const tabsIds = currentProjectTabs.value.split(',');
          ret.modelList = ret.modelList.filter((el) => tabsIds.includes(el.value));
          pageInfo.value = ret;
        }
        nextTick(() => {
          setComplexHeight();
        });
      }

      return {
        handleCreate,
        registerDrawer,
        data,
        userData,
        activePage,
        pageInfo,
        userInfo,
        type,
        formRef,
        setComplexHeight,
        complexHeight,
      };
    },
  });
</script>
<style lang="less" scoped></style>
